<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>手动js的vue项目</title>
	</head>
	<body>
    <div class="app">
      {{ msg }}
      {{ count }}

      <ul v-if="flag" @click="clg($event)">
        <li :data-index="index" style="list-style: none;" v-for="(item, index) in list">{{ index + '-' + item }}</li>
      </ul>

      <div class="counter">
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
      </div>

      <button @click="flag = !flag">点击切换显示隐藏</button>

      <div class="show" v-show="flag">
        {{ msg }}
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      // 创建vue实例
      const app = new Vue({
        el: '.app',
        data: {
          msg: '大姐大快进到阿九打开了按键',
          count: 9090,
          list: [1, 2, 3, 4, 5, 6, 7, 78, 12, 99],
          index: -1,
          flag: true,
          name: '怒号'
        },
        methods: {
          clg (e) {
            // if (e.target.nodeName !== 'LI') return
            // console.log(this.list)
            // console.log(e.target)
            // this.index = +e.target.dataset.index
            // console.log(this.total)
            // this.count = this.total
            add()
            function add() {
              this.count++
            }

            const obj = {
              name: '你好',

              say () {
                console.log(this.name)
              }
            }
            obj.say()
          }
        },
        computed: {
          total () {
            return this.count + this.list[this.index]
          }
        }
      })

      // app.msg = 'nimade '
      // app.msg++
      const a = {
        name: 1,
        ijn() {
          function dasa() {
            console.log(this === window)
          }
          dasa()
        }
      }
      a.ijn()
    </script>
  </body>
</html>
